<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>心</title>
		<style>
			/*抓div元素  心主体*/
			div{
				width:200px;
				height: 200px;
				background-color: #e4393c;
				/*自适应居中*/
				margin: 300px auto;
				/*旋转*/
				transform: rotate(135deg); 
				/*透明度属性: 属性值0~1 范围值*/
				opacity: .8;
				/*滤镜属性：光晕：下阴影*/
				filter: drop-shadow(0 0 100px #e4363c);
				/*动画属性;关键帧的名称  过渡时间 过渡方式 无限循环*/
				animation: heart .s linear;
				animation: heart 0.6s linear infinite;
			}
			/*③伪类选择器：给元素附加上效果的选择器
			语法：div:hover{}  当鼠标悬停到div上 实现的【样式】效果
			需求：鼠标悬停到中间心位置改成圆
			选择器:before 在元素之前添加文本，通常与conent:""
			选择器::after 在元素之后添加文本,通常与content:""
			*/
		   /*伪类选择器div上方增加文本/画圆*/
			div:before{
				content: "";/*行转块*/
				/*显示属性
				display：block;转成块级元素
				display:inline;转成行级元素
				display:none; 元素消失
				*/
				display:block;
				width:200px;
				height: 200px;
				background-color: #e4393c;
				border-radius: 50%;
				/*相对位置*/
				position: relative;
				left: -100px;	
			}
			div:after{
				content: "";
				display:block;
				width: 200px;
				height: 200px;
				background-color: #e4393c;
				border-radius: 50%;
				position: relative;
				top: -100px;
			}
			/*--------动画--------*/
			/*1.创建关键帧--手翻书*/
			@keyframes heart{
				/*3个画面：①等比例出现，防止跳帧  ②缩小比例 ③放大比例*/
				0%{
                     /*转换属性:缩放*/
					 1.表示等比例
					 .8表示缩小0.8倍
					 1.2表示放大1.2倍
					transform:rotate(135deg) scale(1);
				}
				30%{
					transform:rotate(135deg) scale(.8);
				}
				100%{
					transform:rotate(135deg) scale(1.2);
				}
			}
		</style>
	</head>
	<body>
		<!-- 画一颗心  html 1个元素-->
		<div></div>
		<!-- html：元素的分类
		           ①块元素：可以设置宽高、独占一行，典型块元素特点：div
				   ②行元素：不可以设置宽高、可以在一行显示，典型行元素：span
				            文本内容属于行元素
				   ③行内块元素：可以设置宽高、可以在一行内显示  典型行内元素：img
		
		-->
		<!--音乐 老火狐-->
		<audio src="renxi.mp3" autoplay loop></audio>
	</body>
</html>